<template>
	<view>
		
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 700px;"
				 :longitude="longitude" :latitude="latitude" :markers="markers" 
				 @updated="updated" @callouttap="callouttaped"
				 show-location enable-scroll
				>
				</map>
			</view>
			
	</view>
</template>

<script>
	import Map from '@/js_sdk/fx-openMap/openMap.js'
	export default {
	    data() {
				return {
					regions:[],
					list:[],
					id:0, // 使用 marker点击事件 需要填写id
					longitude: 0, // 初始化经纬度
					latitude: 0,
					markers: [{ // 标记点
						id: 1,
						latitude: 31.52966,
						longitude: 120.28429,
						iconPath: '../../static/map/location.png', // 图片必须英文名,设计合理尺寸
						callout:{
							content:"1号测试点",
							borderRadius:10,
							padding:10,
							display:"ALWAYS",
							bgColor: "#000",
							color:"#fff"
							}
						}, {
						id:2,
						latitude: 31.478390,
						longitude: 120.270696, // 没有定位默认定位点为北京
						iconPath: '../../static/map/location.png',
						callout:{
							content:"2号测试点",
							borderRadius:10,
							padding:10,
							display:"ALWAYS",
							bgColor: "#000",
							color:"#fff"
						}
					}],
					defaultProps:{
						label: "name",
						value: "id"
					},
				}
	    },
			computed:{
				regionsName(){
					return this.regions.map(item=>item.name).join(' ') // 转为字符串
				}
			},
			onLoad:function(){
				var that = this
				uni.showLoading()
				this.setAjax()
				uni.getLocation({
				  type: 'gcj02',
				  success: function (res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
				  },
					fail: function(res){}
				})
			},
	    methods: {
				openmap (latitude, longitude, name) {
					Map.openMap(parseFloat(latitude), parseFloat(longitude), name)
				},
				callouttaped(e) {
					uni.navigateTo({
						url: '/pages/details/details?id=' + e.detail.markerId // 标记点的id
					})
				},
				updated(){ // 实时更新自己的位置和状态
					let _this = this;
					uni.getLocation({
					  type: 'gcj02',
					  success: function (res) {
						_this.latitude = res.latitude;
						_this.longitude = res.longitude;
					  },
						fail: function(res){}
				  })
				},
				setAjax(){
					// 获取本地经纬度
					uni.hideLoading()
					// uni.request({
					// 	url: 'https://cx.mingmeijt.com/Api/Shop/index',
					// 	method: 'POST',
					// 	header:{'Content-Type':'application/x-www-form-urlencoded'},
					// 	data:{
					// 		province_id: this.province_id,
					// 		city_id: this.city_id,
					// 		session_id: uni.getStorageSync("sessionid")
					// 	},
					// 	success: res => {
					// 		this.list = res.data.data.list
					// 	},
					// 	fail: () => {},
					// 	complete: () => {}
					// });	
				},
				onCancel(){},
	    }
	}
	
</script>

<style lang="scss">
	
</style>
